<div class="row">
  <div class="clr-col-12" align="center">
    <h6 class="font-title">核心组件状态</h6>
  </div>
  <div class="clr-row" *ngIf="!loading">
    <div class="clr-col-4" *ngFor="let c of componentData">
      <div class="card shadow-none">
        <div class="card-header">
          <div class="clr-row">
            <div class="clr-col-8">
              <small>{{c.name}}</small>
            </div>
            <div class="clr-col-3">
              <small [ngStyle]="{'color':c.status | statusColor }">{{c.status | status}}</small>
            </div>
            <div class="clr-col-1">
              <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg  tooltip-bottom-left tooltip-margin"
                 *ngIf="c.status!='RUNNING'">
                <clr-icon shape="info-circle" size="24"></clr-icon>
                <span class="tooltip-content">
                  {{c.msg}}
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <div class="clr-col-12" align="center">
    <h6 class="font-title">系统组件状态</h6>
  </div>
  <div class="clr-row" *ngIf="loading" style="margin-top: 10%">
    <div class="clr-col-12" align="center">
      <span class="spinner spinner-lg loading">
        Loading...
      </span>
    </div>
    <div class="clr-col-12" align="center">
      <small>
        如果加载时间过长 可能是组件出现错误 请耐心等待
      </small>
    </div>
  </div>
  <div class="clr-row" *ngIf="!loading && error">
    <div class="clr-col-12" style="text-align: center;">
      <span style="color: red">{{errorMessage}}</span>
    </div>
  </div>
  <div class="clr-row" *ngIf="!loading && !error">
    <div class="clr-col-12">
      <clr-datagrid>
        <clr-dg-action-bar>
          <div class="clr-select-wrapper">
            <select class="clr-select" [(ngModel)]="namespace" (ngModelChange)="getClusterHealth()">
              <option value="all">所有</option>
              <option *ngFor="let n of namespaces" value="{{n}}">{{n}}</option>
            </select>
          </div>
        </clr-dg-action-bar>
        <clr-dg-column>Namespace</clr-dg-column>
        <clr-dg-column>名称</clr-dg-column>
        <clr-dg-column>状态</clr-dg-column>
        <clr-dg-column>Ready</clr-dg-column>
        <clr-dg-column>重启次数</clr-dg-column>
        <clr-dg-column>运行时间</clr-dg-column>
        <clr-dg-row *clrDgItems="let item of healthData" [clrDgItem]="item">
          <clr-dg-cell>{{item.namespace}}</clr-dg-cell>
          <clr-dg-cell>{{item.name}}</clr-dg-cell>
          <clr-dg-cell [ngStyle]="{'color':item.status | statusColor }">{{item.status | status}}</clr-dg-cell>
          <clr-dg-cell>{{item.ready}}</clr-dg-cell>
          <clr-dg-cell>{{item.restart_count}}</clr-dg-cell>
          <clr-dg-cell>{{item.age}}</clr-dg-cell>
        </clr-dg-row>
        <clr-dg-footer>
          <clr-dg-pagination #pagination [clrDgPageSize]="100">
            <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">每页个数</clr-dg-page-size>
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
            共{{pagination.totalItems}} 个
          </clr-dg-pagination>
        </clr-dg-footer>
      </clr-datagrid>
    </div>
  </div>
</div>

